<template>
  <div>
    <el-date-picker v-model="dateRange" :type="dateType" range-separator="-" start-placeholder="请选择起始"
      end-placeholder="请选择结束" @update:modelValue="updateValue" :format="format" :valueFormat="valueFormat" />
  </div>
</template>

<script setup lang="ts">
type Props = {
  modelValue: any
  dateType?: any
  format?: string
  valueFormat?: string
}
const props = withDefaults(defineProps<Props>(), {
  dateType: 'daterange',
  format: 'YYYY年MM月DD日',
  valueFormat: 'YYYY-MM-DD',
})
const dateRange:any = ref([])
watch(() => props.modelValue, (val) => {
  if (!val) {
    dateRange.value = []
  } else {
    dateRange.value = Array.isArray(val) ? val : val.split(',')
  }
}, {
  immediate: true
})
const emit = defineEmits(['update:modelValue','change'])

const updateValue = (val) => {
  if(Array.isArray(val) && val.length === 2) {
    const date = val[1].split(' ')
    if(date.length ==2) {
      val.splice(1,1,date[0]+' 23:59:59')
    }
  }
  emit('update:modelValue', val ? val.join(',') : '')
  emit('change', val ? val.join(',') : '')
}

</script>

<style scoped></style>